import React, { Component } from 'react'
import './parentA.css'
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap';
import { Icon } from 'antd'
export default class parentB extends Component {
    constructor() {
        super()
        this.state = {
            List2: [
                ['广州市', '深圳市', '珠海市'],
                ['南宁市', '柳州市', '桂林市'],
                ['烟台市', '青岛市', '济南市']
            ],
            List: [
                {
                    "id": "0001",
                    "item": [
                        {
                            tit: "广州市",
                            flag: true
                        },
                        {
                            tit: "深圳市",
                            flag: true
                        },
                        {
                            tit: "珠海市",
                            flag: true
                        }
                    ],
                    "title": "广东省",
                },
                {
                    "id": "0002",
                    "item": [
                        {
                            tit: "南宁市",
                            flag: true
                        },
                        {
                            tit: "柳州市",
                            flag: true
                        },
                        {
                            tit: "桂林市",
                            flag: true
                        }
                    ],
                    "title": "广西省",
                },
                {
                    "id": "0003",
                    "item": [
                        {
                            tit: "烟台市",
                            flag: true
                        },
                        {
                            tit: "青岛市",
                            flag: true
                        },
                        {
                            tit: "济南市",
                            flag: true
                        }
                    ],
                    "title": "山东省",
                }],
        }
    }
    componentWillReceiveProps() {
        if (this.props.val.length == 0) {
            this.state.List.forEach(item => {
                item.item.forEach(val => {
                    val.flag = true
                })
            })
            this.setState({
                List: this.state.List
            })
        }
    }
    flag(tit) {
        this.state.List.forEach(item => {
            item.item.forEach(val => {
                if (val.tit === tit) {
                    val.flag = !val.flag
                }
            })
        })
        this.setState({
            List: this.state.List
        })
    }
    search(e) {


    }
    render() {
        return (
            // <div className={this.props.flag ? "nav3" : "nav2"}>
            //     <input onChange={this.search.bind(this)} type="text" className='inp' />
            //     <ul >
            //         广东省
            //       {this.state.List[0].map((item, index) => {
            //             return <li key={index} onClick={this.props.addList.bind(this.props.this, item)}>{item}<span className={this.props.flag ? "dian2" : "dian"} >√</span></li>
            //         })}
            //     </ul>
            //     <ul >
            //         广西省
            //         {this.state.List[1].map((item, index) => {
            //             return <li key={index} onClick={this.props.addList.bind(this.props.this, item)} >{item}</li>
            //         })}
            //     </ul>
            //     <ul>
            //         山东省
            //         {this.state.List[2].map((item, index) => {
            //             return <li key={index} onClick={this.props.addList.bind(this.props.this, item)} >{item}</li>
            //         })}
            //     </ul>
            // </div>
            <div className={this.props.flag ? "nav3" : "nav2"}>
                <input onChange={this.search.bind(this)} type="text" className='inp form-control' />
                {this.state.List.map((item, index) => {
                    return <ul className='ul' key={index}>
                        {item.title}
                        {item.item.map((val, index) => {
                            return <span className='dian3' onClick={this.flag.bind(this, val.tit)} key={index}  ><li onClick={this.props.addList.bind(this.props.this, val.tit)} >
                                {val.tit}

                            </li><span className={val.flag ? "dian" : "dian2"}><Icon type="check" /></span></span>
                        })}
                    </ul>
                })}
            </div>
        )
    }
}